<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19.Vue生命周期</title>


</head>
<body>
<div id="app">
    <span id="sp">{{msg}}</span>
    <input type="button" value="修改数据" @click="change">
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: '百知教育'
        },
        methods: {
            change() {
                this.msg = Math.random();
            }
        },
        beforeCreate() {//1.生命周期中第一个函数,该函数在执行时vue实例仅仅完成了自身事件的绑定和生命周期函的初始化工作,Vue实例中还没有 Data el methods相关属性
            console.log("beforeCreate:" + this.msg);
        },
        created() {
            /2.生命周期中第二个函数,该函数在执行时vue实例已经初始化了data属性和 methods中相关方法
            console.log("created:" + this.msg);
        },
        beforeMount() {//3.生命周期中第三个函数,该函数在执行时vue将E1中指定作用范围作为模板编译
            console.log(" beforeMount:" + document.getElementById("sp").innerText);
        },
        mounted() {//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
            console.log("Mounted: " + document.getElementById("sp").innerText)
        },
        beforeUpdate() {//5.生命周期中第五个函数,该函数是data中数据发生变化时执行这个事件执行时仅仅是vue实例中data数据变化页面显示的依然是原始数据
            console.log("beforeUpdate: " + this.msg);
            console.log("beforeUpdate: " + document.getElementById("sp").innerText);
        },
        updated() {//6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化页面中数据已经和data中数据一致
            console.log(" updated: " + this.msg);
            console.log("updated: " + document.getElementById("sp").innerText);
        },
    });
</script>
</body>
</html>